<template>
    <div class="singersong-list">
        <van-nav-bar title="歌手热门50首歌曲" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
        <div class="list">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item,index) in listData" :key="index">
                    <h4>{{item.name}}</h4>
                    <div class="singer">
                        <span v-for="(singer, index) in item.ar" :key="index">{{ singer.name }}</span>
                        <span v-show="item.awardName">
                            <span>·</span>
                            <span>{{item.awardName}}</span>
                        </span>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
      listData: [],
      list: [],
      loading: false,
      finished: false,
    }
    },
    created(){
        this.getListData()
    },
    methods:{
        getListData(){
            this.$request('get','/artist/top/song?id=' + this.$route.params.id)
            .then((code)=>{
                console.log(code)
                this.listData = code.songs
                console.log(this.listData)
            })
            
        },
        onClickLeft() {
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        },
        onLoad(){
            setTimeout(() => {
                this.list = this.list.concat(this.listData.splice(0, 10));
                this.finished = true;
                if(this.list.length >= 50){
                    this.finished = true;
                }
            }, 1000);
        },
    }
}
</script>

<style scoped>
.list {
    margin: 0 1rem;
}

.list h4 {
    text-align: left;
    font-size: 1rem;
}

.singer {
    text-align: left;
}

.singer span {
    font-size: 0.8rem;
    color: rgb(160, 160, 190);
}

.singer>span:nth-last-child(1)>span:nth-child(1) {
    margin: 0 0.5rem;
    font-weight: 900;
    color: red;
}
</style>